<script setup lang="ts">
  import { useModeModalBinder } from '@/hooks/arco/useModeModalBinder';
  import { useForm } from '@/hooks/arco/useForm';
  import { editElder } from '@/api/file-management/file';
  import { computed } from 'vue';
  import { createReusableTemplate } from '@vueuse/core';
  import {
    calculateAge,
    checkID,
    getGenderByID,
    REG_ID,
    REG_PHONE,
  } from '@/utils/rule';

  withDefaults(
    defineProps<{
      showInModal?: boolean;
    }>(),
    {
      showInModal: true,
    }
  );

  const [DefineTemplate, ReuseTemplate] = createReusableTemplate();

  const editForm = useForm({
    labelCol: {
      span: 5,
    },
    state: {
      elderId: '',
      elderName: '',
      status: '',
      idCardType: 1,
      idCardNo: '',
      emergentContactName: '',
      emergentContactPhone: '',
      gender: '',
      age: '',
    },
    rules: {
      elderName: {
        required: true,
        message: '请输入长者姓名',
      },
      status: {
        required: true,
        message: '请选择长者状态',
      },
      idCardNo: {
        required: true,
        match: REG_ID,
        message: '请输入合法身份证号',
      },
      idCardType: {
        required: true,
        message: '请选择证件类型',
      },
      emergentContactName: {
        required: true,
        message: '请输入家属姓名',
      },
      emergentContactPhone: {
        required: true,
        message: '请输入联系电话',
        match: REG_PHONE,
      },
      gender: {
        required: true,
        message: '输入身份证号后自动推算',
      },
      age: {
        required: true,
        message: '输入身份证号后自动推算',
      },
    },
  });

  const personGender = computed(() => {
    const v = checkID(editForm.state.idCardNo);

    if (v) {
      return getGenderByID(editForm.state.idCardNo);
    }

    return '';
  });

  const personAge = computed(() => {
    const v = checkID(editForm.state.idCardNo);
    if (v) {
      return calculateAge(editForm.state.idCardNo).toString();
    }
    return '';
  });

  const modal = useModeModalBinder({
    modes: ['edit'] as const,
    renderTitle() {
      return '编辑长者';
    },
    onShow(mode, otherParams) {
      // console.log(otherParams);
      editForm.setFieldsValue(otherParams);
    },
    async onOkClick() {
      editForm.state.age = personAge.value;
      editForm.state.gender = personGender.value;
      await editForm.validate();
      return editElder(editForm.state);
    },
  });

  defineExpose({
    ...modal.expose,
    validate: () => {
      editForm.state.age = personAge.value;
      editForm.state.gender = personGender.value;
      return editForm.validate();
    },
    getData: () => {
      return editForm.state;
    },
    setData: (data: any) => {
      editForm.setFieldsValue(data);
    },
  });
</script>

<template>
  <DefineTemplate>
    <a-form
      :layout="showInModal ? 'vertical' : 'horizontal'"
      v-bind="editForm.bindProps"
    >
      <a-row>
        <a-col :span="24">
          <a-form-item field="elderName" label="长者姓名">
            <a-input
              v-model="editForm.state.elderName"
              placeholder="请输入长者姓名"
              :max-length="20"
            />
          </a-form-item>
        </a-col>

        <a-col v-if="showInModal" :span="24">
          <a-form-item field="status" label="长者状态">
            <dict-select
              v-model="editForm.state.status"
              type="ElderStatus"
              placeholder="请输入长者状态"
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="idCardType" label="证件类型">
            <dict-select
              v-model="editForm.state.idCardType"
              type="ElderCardType"
              placeholder="请输入证件类型"
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="idCardNo" label="证件号码">
            <a-input
              v-model="editForm.state.idCardNo"
              placeholder="请输入证件号码"
              :max-length="18"
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="gender" label="长者性别">
            <a-input
              :model-value="personGender"
              readonly
              placeholder="根据证件号码自动计算"
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="age" label="长者年龄">
            <a-input
              :model-value="personAge"
              readonly
              placeholder="根据证件号码自动计算"
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="emergentContactName" label="家属姓名">
            <a-input
              v-model="editForm.state.emergentContactName"
              placeholder="请输入家属姓名"
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="emergentContactPhone" label="联系电话">
            <a-input
              v-model="editForm.state.emergentContactPhone"
              placeholder="请输入联系电话"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </DefineTemplate>

  <a-drawer
    v-if="showInModal"
    position="right"
    width="400px"
    v-bind="modal.bindProps"
  >
    <ReuseTemplate />
  </a-drawer>
  <div v-else>
    <ReuseTemplate />
  </div>
</template>

<style lang="less" scoped></style>
